<template>
    <!-- <div>商品标签列表</div> -->

    <div class="shop">
        <div class="top">
            <el-button size='small'
                       type='primary'
                       @click="isShowAddCategory = true">新增标签
            </el-button>

            <el-button class='search'
                       size='small'
                       type='primary'
                       @click="searchLabelData">搜索
            </el-button>
            <el-input class="search input"
                      size='small'
                      v-model="form.label_id"
                      placeholder="输入id查询"
                      clearable></el-input>
            <el-input class="search input"
                      size='small'
                      v-model="form.name"
                      placeholder="输入标签名称查询"
                      clearable></el-input>
        </div>

        <el-table :data="tableData"
                  style="width:100%"
                  max-height="680"
                  :cell-style="tc"
                  :header-cell-style="tccolor">
            <el-table-column label='ID'
                             prop='id'
                             width='100'></el-table-column>
            <el-table-column label='标签名称'
                             width='140'>
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column label='图标'
                             width='100'>
                <template slot-scope="scope">
                    <div class="img">
                        <img style="width:50px;height: 50px"
                             :src="scope.row.icon ? scope.row.icon : errorImg" alt/>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label='有效时间'
                             width='340'>
                <template slot-scope="scope">
                    <span>{{scope.row.valid_start_time}} - {{scope.row.valid_end_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label='关联商品数'
                             prop='product_num'
                             width='140'>
                <template slot-scope="scope">
                    {{scope.row.product_num}}
                </template>
            </el-table-column>
            <el-table-column label='展示排序'
                             width="100px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.sort"
                              type="number"
                              @blur="labelOrderSortChange(scope.row.id, scope.row.sort)"/>
                </template>
            </el-table-column>
            <el-table-column label='标签状态'>
                <template slot-scope="scope">
                    <el-switch :key="scope.row.id"
                               :active-value="0"
                               :inactive-value="1"
                               :value="scope.row.status"
                               @change="isUseActivityChange(scope.row.id,$event)"></el-switch>
                    <span>{{scope.row.is_enable_word}}</span>
                </template>
            </el-table-column>
            <el-table-column label='操作'
                             fixed='right'
                             width='240'>
                <template slot-scope="scope">
                    <el-button size='mini'
                               type='primary'
                               @click="changeLabel(scope.row)">修改
                    </el-button>
                    <el-button size='mini'
                               @click="deleteLabel(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24">
            <div class="pagination">
                <el-pagination background
                               @current-change="pageChange"
                               :current-page="form.page"
                               :page-size="form.size"
                               layout="total, prev, pager, next, jumper"
                               :total="total"></el-pagination>
            </div>
        </el-col>

        <!-- 新增-->
        <jdialog title="新增标签"
                 :visible.sync="isShowAddCategory"
                 width="640px">
            <el-form :model='cateForm'
                     :rules="rules"
                     class="demo-ruleForm"
                     label-width="140px">
                <el-form-item label="标签名称："
                              prop="name">
                    <el-input v-model="cateForm.name"
                              style='width:180px;'
                              size='mini'
                              placeholder='请输入标签名称'></el-input>
                </el-form-item>

                <el-form-item label='有效时长:' required=“true”>
                    <el-date-picker
                            v-model="cateForm.valid_start_time"
                            type="datetime"
                            align="right"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            unlink-panels
                            placeholder="开始日期"

                    >
                    </el-date-picker>
                    <el-date-picker
                            v-model="cateForm.valid_end_time"
                            type="datetime"
                            align="right"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            unlink-panels
                            placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label='排序：'
                              prop='sort'>
                    <el-input v-model='cateForm.sort'
                              style='width:140px;'
                              size='mini'
                              placeholder='0～99'></el-input>
                </el-form-item>

                <el-form-item label='图标：'
                              prop='icon'>
                    <uploadImg flieName="icon"
                               class="icon_cate"
                               :oldImgs="[cateForm.icon]"
                               :n="1"
                               @getFile="getFile"></uploadImg>
                    <p class='note'>支持png、jpg格式照片，大小不能超过1M</p>
                </el-form-item>

                <el-form-item label="是否启用：">
                    <el-radio-group v-model="cateForm.status">
                        <el-radio label="0">可用</el-radio>
                        <el-radio label="1">不可用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div class='align'>
                <el-button size='mini'
                           @click='isShowAddCategory = false'>取消
                </el-button>
                <el-button size='mini'
                           type='primary'
                           @click='certainAddLabel'>确定
                </el-button>
            </div>
        </jdialog>

        <!--修改-->
        <jdialog title="标签修改"
                 :visible.sync="isShowModifyCategory"
                 width="640px">
            <el-form :model='modifyForm'
                     :rules="modelrules"
                     class="demo-ruleForm"
                     label-width="140px">

                <el-form-item label="标签名称："
                              prop="name">
                    <el-input v-model="modifyForm.name"
                              style='width:180px;'
                              size='mini'
                              placeholder='请输入标签名称'></el-input>
                </el-form-item>

                <el-form-item label='有效时长:' required=“true”>
                    <el-date-picker
                            v-model="modifyForm.valid_start_time"
                            type="datetime"
                            align="right"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="开始日期"
                    >
                    </el-date-picker>
                    -
                    <el-date-picker
                            v-model="modifyForm.valid_end_time"
                            type="datetime"
                            align="right"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label='排序：'
                              prop='sort'>
                    <el-input v-model='modifyForm.sort'
                              style='width:140px;'
                              size='mini'
                              placeholder='0～99'></el-input>
                </el-form-item>

                <el-form-item label='图标：'
                              prop='icon'>
                    <uploadImg flieName="icon"
                               class="icon_cate"
                               :oldImgs="[modifyForm.icon]"
                               :n="1"
                               @getFile="getModifyFile"></uploadImg>
                    <p class='note'>支持png、jpg格式照片，大小不能超过1M</p>
                </el-form-item>

                <el-form-item label="是否启用：">
                    <el-radio-group v-model="modifyForm.status">
                        <el-radio label="0">可用</el-radio>
                        <el-radio label="1">不可用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div class='align'>
                <el-button size='mini'
                           @click='isShowModifyCategory = false'>取消
                </el-button>
                <el-button size='mini'
                           type='primary'
                           @click='certainModifyLabel'>确定
                </el-button>
            </div>
        </jdialog>
    </div>
</template>


<script>
    // import uploadImg from "@/components/uploadImg";
    import {
        supplyproductLabelList,
        productLabelStatusUpdate,
        productLabelCreate,
        productLabelDelete,
        productLabelUpdate,
        setLabelOrderSort
    } from "@/api/autarky"

    export default {
        name: "labelManagement",
        components: {
            // uploadImg
        },
        data() {
            return {
                isShowAddCategory: false,

                isShowModifyCategory: false,
                showCate_id: '',

                form: {
                    label_id: '',
                    name: '',
                    page: 1,
                    size: 20
                },

                total: 0,
                tableData: [],


                cateForm: {
                    name: '',
                    sort: '',
                    icon: '',
                    status: '0',
                    valid_start_time: '',
                    valid_end_time: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}],
                    sort: [{message: '请输入排序', trigger: 'blur'}],
                    icon: [
                        {required: true, message: '请上传图标', trigger: 'blur'}
                    ],
                    valid_start_time: [
                        {required: true, message: '请选择开始时间', trigger: 'blur,change'}
                    ],
                    valid_end_time: [
                        {required: true, message: '请选择结束时间', trigger: 'blur,change'},
                    ],

                },

                modifyForm: {
                    name: '',
                    sort: '',
                    icon: '',
                    status: '',
                    valid_start_time: '',
                    valid_end_time: ''
                },
                modelrules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}],
                    sort: [{message: '请输入排序', trigger: 'blur'}],
                    icon: [
                        {required: true, message: '请上传图标', trigger: 'blur'}
                    ],
                    valid_start_time: [
                        {required: true, message: '请选择开始时间', trigger: 'blur'}
                    ],
                    valid_end_time: [
                        {required: true, message: '请选择结束时间', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
            this.getsupplyproductLabelListData()
        },
        methods: {
            //搜索数据
            searchLabelData() {
                this.getsupplyproductLabelListData()
            },
            pageChange(page) {
                this.form.page = page
                //获取更多数据
                this.getsupplyproductLabelListData()
            },
            //更改商品分类状态
            isUseActivityChange(id, e) {
                //更新成功后重新获取商品
                this.getproductLabelEnableUpdateData(id, e)
            },

            //修改标签
            changeLabel(data) {
                this.showCate_id = data.id
                this.modifyForm = {
                    id: data.id,
                    name: data.name,
                    sort: data.sort,
                    icon: data.icon,
                    valid_start_time: data.valid_start_time,
                    valid_end_time: data.valid_end_time,
                    status: data.status + ''
                }
                this.isShowModifyCategory = true
            },

            //删除
            deleteLabel(id) {
                this.$confirm('确认删除该标签？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.getproductLabelDeleteData(id)
                }).catch(() => {
                    console.log('cancel')
                });
            },
            //确定新增
            certainAddLabel() {
                this.getproductLabelCreateData()
            },
            //确定修改
            certainModifyLabel() {
                this.getproductLabelUpdateUpdateData()
            },
            //获取商品分类列表数据
            async getsupplyproductLabelListData() {
                var url = "id=" + this.form.label_id +
                    "&name=" + this.form.name +
                    "&page=" + this.form.page
                let res = await supplyproductLabelList(url)
                if (res.code === 10000) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
            },
            //更新可用状态
            async getproductLabelEnableUpdateData(label_id, status) {
                let res = await productLabelStatusUpdate({id: label_id, status: status})
                if (res.code === 10000) {
                    this.$message.success(res.message)
                    this.getsupplyproductLabelListData()
                } else {
                    this.$message.error(res.message)
                }
            },
            //新增
            async getproductLabelCreateData() {
                let res = await productLabelCreate(this.cateForm)
                if (res.code === 10000) {
                    this.cateForm = {}
                    this.$message.success(res.message)
                    this.getsupplyproductLabelListData()
                    this.isShowAddCategory = false
                } else {
                    this.$message.error(res.message)
                }
            },
            //修改
            async getproductLabelUpdateUpdateData() {
                let res = await productLabelUpdate(this.modifyForm)
                if (res.code === 10000) {
                    this.modifyForm = {}
                    this.showCate_id = ''
                    this.$message.success(res.message)
                    this.getsupplyproductLabelListData()
                    this.isShowModifyCategory = false
                } else {
                    this.$message.error(res.message)
                }
            },
            //删除
            async getproductLabelDeleteData(label_id) {
                console.log(label_id)
                let res = await productLabelDelete({id: label_id})
                if (res.code === 10000) {
                    this.$message.success(res.message)
                    this.getsupplyproductLabelListData()
                } else {
                    this.$message.error(res.message)
                }
            },
            getFile(file) {
                this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
            },

            getModifyFile(file) {
                this.modifyForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
            },
            tc() {
                return "text-align:center; color:#333333; font-size:12px;";
            },
            tccolor() {
                return "text-align:center;background-color:#f5f5f5; font-size:14px;";
            },
            labelOrderSortChange(label_id, sort) {
                setLabelOrderSort({id: label_id, sort: sort}).then(res => {
                    console.log(res)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .shop {
        padding: 20px;

        .top {
            margin-bottom: 20px;

            .search {
                float: right;
                margin-left: 12px;
            }

            .input {
                width: 150px;
            }
        }

        .cetain {
            color: #f4222d;
        }

        .pagination {
            float: right;
            margin-top: 12px;
        }

        .icon_cate {
            float: left;
        }

        .demo-ruleForm {
            padding: 20px;
        }

        .note {
            color: #666666;
            font-size: 14px;
            margin-top: 28px;
        }

        .align {
            text-align: center;
            margin-bottom: 20px;
        }
    }
</style>
